<template>
  <div class="home">
    <el-row :gutter="20">
      <!-- 信用分展示 -->
      <el-col :span="8">
        <el-card class="credit-score">
          <template #header>
            <div class="card-header">
              <span>我的信用分</span>
            </div>
          </template>
          <div class="score-content">
            <div class="score-composition-wrapper">
              <div class="score-center-circle">
                <span class="score-total">{{ creditScoreData.total }}</span>
              </div>
              <div class="score-segment segment-basic">
                <span class="segment-name">个人基础</span><br>
                <span class="segment-value">{{ creditScoreData.basic }}</span>
              </div>
              <div class="score-segment segment-commercial">
                <span class="segment-name">信用商业</span><br>
                <span class="segment-value">{{ creditScoreData.commercial }}</span>
              </div>
              <div class="score-segment segment-life">
                <span class="segment-name">信用生活</span><br>
                <span class="segment-value">{{ creditScoreData.life }}</span>
              </div>
              <div class="score-segment segment-social">
                <span class="segment-name">亲社会行为</span><br>
                <span class="segment-value">{{ creditScoreData.social }}</span>
              </div>
            </div>
            <div class="score-metrics-bottom">
              <div class="metric-item">
                <span class="metric-value">{{ currentCreditUses }}</span>
                <span class="metric-label">当期信用次数</span>
              </div>
              <div class="metric-item">
                <span class="metric-value">{{ creditScoreImprovement }}</span>
                <span class="metric-label">信用分提升</span>
              </div>
            </div>
            <el-button type="primary" class="credit-records-button" @click="goToCreditRecords">我的信用记录</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 信用权益 -->
      <el-col :span="16">
        <el-card class="credit-benefits">
          <template #header>
            <div class="card-header">
              <span>信用权益</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8" v-for="benefit in benefits" :key="benefit.id">
              <div class="benefit-item">
                <el-icon :size="32" :color="benefit.color">
                  <component :is="benefit.icon" />
                </el-icon>
                <h3>{{ benefit.title }}</h3>
                <p>{{ benefit.desc }}</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 推荐服务 -->
    <el-card class="recommended-services">
      <template #header>
        <div class="card-header">
          <span>推荐服务</span>
        </div>
      </template>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="热门商品" name="products">
          <el-row :gutter="20">
            <el-col :span="6" v-for="product in products" :key="product.id">
              <el-card class="product-card" shadow="hover">
                <img :src="product.image" class="product-image" />
                <h3>{{ product.name }}</h3>
                <p class="price">¥{{ product.price }}</p>
                <el-button type="primary" size="small">立即购买</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="精选房源" name="houses">
          <el-row :gutter="20">
            <el-col :span="8" v-for="house in houses" :key="house.id">
              <el-card class="house-card" shadow="hover">
                <img :src="house.image" class="house-image" />
                <h3>{{ house.title }}</h3>
                <p class="location">{{ house.location }}</p>
                <p class="price">¥{{ house.price }}/月</p>
                <el-button type="primary" size="small">查看详情</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="特惠酒店" name="hotels">
          <el-row :gutter="20">
            <el-col :span="8" v-for="hotel in hotels" :key="hotel.id">
              <el-card class="hotel-card" shadow="hover">
                <img :src="hotel.image" class="hotel-image" />
                <h3>{{ hotel.name }}</h3>
                <p class="location">{{ hotel.location }}</p>
                <p class="price">¥{{ hotel.price }}/晚</p>
                <el-button type="primary" size="small">立即预订</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  ShoppingCart,
  House,
  Van,
  FirstAidKit,
  Location,
  Present
} from '@element-plus/icons-vue'

// 信用分数据
const creditScoreData = reactive({
  total: 655,
  basic: 127,
  commercial: 100,
  life: 150,
  social: 143
});

const currentCreditUses = ref(34);
const creditScoreImprovement = ref('65%');

// 信用等级 (不再直接在卡片中显示，但可以保留逻辑备用)
const creditLevel = computed(() => {
  if (creditScoreData.total >= 700) return '优秀'
  if (creditScoreData.total >= 600) return '良好'
  if (creditScoreData.total >= 500) return '一般'
  return '较差'
})

// 信用分颜色 (不再直接在卡片中显示，但可以保留逻辑备用)
const scoreColor = computed(() => {
  if (creditScoreData.total >= 700) return '#67C23A'
  if (creditScoreData.total >= 600) return '#409EFF'
  if (creditScoreData.total >= 500) return '#E6A23C'
  return '#F56C6C'
})

// 信用权益
const benefits = [
  {
    id: 1,
    title: '信用购物',
    desc: '享受免押金、分期付款等特权',
    icon: 'ShoppingCart',
    color: '#409EFF'
  },
  {
    id: 2,
    title: '便利租赁',
    desc: '免押金租房、租车等服务',
    icon: 'House',
    color: '#67C23A'
  },
  {
    id: 3,
    title: '交通出行',
    desc: '公交地铁信用支付',
    icon: 'Van',
    color: '#E6A23C'
  },
  {
    id: 4,
    title: '医疗健康',
    desc: '信用就医、免押金挂号',
    icon: 'FirstAidKit',
    color: '#F56C6C'
  },
  {
    id: 5,
    title: '停车服务',
    desc: '信用停车、自动扣费',
    icon: 'Location',
    color: '#909399'
  },
  {
    id: 6,
    title: '公益活动',
    desc: '参与公益、提升信用',
    icon: 'Present',
    color: '#9B59B6'
  }
]

// 推荐服务
const activeTab = ref('products')

// 模拟数据
const products = [
  {
    id: 1,
    name: '智能手表',
    price: 999,
    image: 'https://via.placeholder.com/200x200'
  },
  {
    id: 2,
    name: '无线耳机',
    price: 699,
    image: 'https://via.placeholder.com/200x200'
  },
  {
    id: 3,
    name: '智能音箱',
    price: 399,
    image: 'https://via.placeholder.com/200x200'
  },
  {
    id: 4,
    name: '智能门锁',
    price: 1299,
    image: 'https://via.placeholder.com/200x200'
  }
]

const houses = [
  {
    id: 1,
    title: '精装两居室',
    location: '西湖区',
    price: 3500,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 2,
    title: '豪华三居室',
    location: '上城区',
    price: 5000,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 3,
    title: '温馨一居室',
    location: '下城区',
    price: 2500,
    image: 'https://via.placeholder.com/300x200'
  }
]

const hotels = [
  {
    id: 1,
    name: '西湖大酒店',
    location: '西湖区',
    price: 688,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 2,
    name: '钱塘江畔酒店',
    location: '江干区',
    price: 899,
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 3,
    name: '武林广场酒店',
    location: '拱墅区',
    price: 550,
    image: 'https://via.placeholder.com/300x200'
  }
]

const router = useRouter()

const goToCreditRecords = () => {
  router.push('/user/records')
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.credit-score,
.credit-benefits,
.recommended-services {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
}

.score-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.score-composition-wrapper {
  position: relative;
  width: 250px; /* Adjust size as needed */
  height: 250px;
  margin-bottom: 20px;
  /* For the background color of the outer circle, if desired */
  /* background-color: #e0f2f7; */
  border-radius: 50%;
}

.score-center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px; /* Inner circle size */
  height: 150px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px; /* Larger font for total score */
  font-weight: bold;
  color: #409EFF; /* Blue color for the score */
  z-index: 2; /* Ensure it's on top */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Soft shadow */
}

.score-segment {
  position: absolute;
  font-size: 14px;
  color: #303133;
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}

/* Positioning for each segment */
.segment-basic {
  top: 25%;
  left: 15%;
  transform: translate(-50%, -50%);
  text-align: left;
}
.segment-commercial {
  top: 25%;
  right: 15%;
  left: auto;
  transform: translate(50%, -50%);
  text-align: right;
}
.segment-life {
  bottom: 25%;
  right: 15%;
  left: auto;
  transform: translate(50%, 50%);
  text-align: right;
}
.segment-social {
  bottom: 25%;
  left: 15%;
  transform: translate(-50%, 50%);
  text-align: left;
}

/* Small colored circles next to the labels */
.score-segment .segment-name {
    position: relative;
    padding-left: 15px; /* Space for the circle */
    display: inline-block;
}
.score-segment .segment-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
/* Colors matching the image (shades of blue) */
.segment-basic .segment-name::before { background-color: #A0CFFF; } /* Lighter blue */
.segment-commercial .segment-name::before { background-color: #409EFF; } /* Main blue */
.segment-life .segment-name::before { background-color: #79BBFF; } /* Medium blue */
.segment-social .segment-name::before { background-color: #C6E2FF; } /* Very light blue */

.score-metrics-bottom {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.metric-item {
  text-align: center;
  flex: 1;
}

.metric-value {
  font-size: 28px; /* Larger for 34 and 65% */
  font-weight: bold;
  color: #303133;
  display: block;
}

.metric-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.credit-records-button {
  margin-top: 20px;
  width: calc(100% - 40px); /* Adjust to card padding to match width */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- Existing styles below this line (keeping them for context) --- */

.benefit-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #fff;
}

.benefit-item h3 {
  margin-top: 10px;
  color: #303133;
}

.benefit-item p {
  font-size: 14px;
  color: #606266;
  margin-top: 5px;
}

.recommended-services .el-tabs__header {
  margin-bottom: 20px;
}

.product-card,
.house-card,
.hotel-card {
  margin-bottom: 20px;
}

.product-image,
.house-image,
.hotel-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}

.product-card h3,
.house-card h3,
.hotel-card h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #303133;
}

.product-card .price,
.house-card .price,
.hotel-card .price {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 10px;
}

.house-card .location,
.hotel-card .location {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}
</style> 